The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Feb 26, 2026 10:11pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Feb 26, 2026 10:11pm

@claude Review the PR.
also fix the build and make sure all circleci are green.

Claude finished @tsahimatsliah's task in 10m 57s —— View job

PR Review & Build Fix

• Gather context and read changed files
• Investigate build failure — found 2 ESLint errors in onboarding-v2.tsx
• Fix build issues
  • Remove unused variable panelShadowOpacity (line 1081)
  • Replace for...of loop with Array.prototype.find() (line 829) — airbnb no-restricted-syntax
• Review PR code
• Push fixes ✓

Build Fix

Two ESLint errors were found that caused the Vercel build to fail:

1. Unused variable — panelShadowOpacity was declared but never referenced
2. for...of loop — disallowed by the airbnb no-restricted-syntax rule; replaced with Array.prototype.find()

Fix committed: d1e5ecc

CircleCI only lints packages/shared, not packages/webapp, which is why CI was green but Vercel failed. next build runs ESLint on pages/ and treats errors as build failures.

Code Review

The feature is visually impressive but the implementation has several concerns worth addressing in follow-up:

Critical — DOM Mutation Anti-patterns

Live engagement ticker mutates the DOM directly (onboarding-v2.tsx:802–988)
The ticker uses document.querySelector, creates real DOM nodes with document.createElement, appends them, and removes them via setTimeout — all outside React's knowledge. This bypasses error boundaries and React reconciliation, and has already caused related crashes in the codebase (see #5589). The MutationObserver on document.body (subtree: true) is particularly broad and fires on every DOM change site-wide.

// ❌ Current approach
const label = document.createElement('label');
label.htmlFor = btnId;
wrapper.appendChild(label);

// ✅ Better: track counters in React state and render them

Fix this →

Architecture

3540-line single-file component — The entire page — state, business logic, all UI sub-flows, and ~670 lines of global CSS — lives in one file. Per the CLAUDE.md philosophy of pragmatic iteration, this will be hard to maintain or A/B test. The distinct flows (GitHub import, AI setup, extension promo, confetti, signup chooser) could each be extracted into focused components.

~670-line <style jsx global> block (onboarding-v2.tsx:1892–2561) — All custom animations and keyframes are inlined as a tagged template literal. Moving these to a .css or .pcss file would make them treeshakeable, cacheable, and easier to work with.

GitHub orb visualization is copy-pasted 3× — The animated orb with rotating rings, incoming particles, and center icon appears in the personalization panel (×2) and the import overlay. Extract to a shared OnboardingOrb component.

GitHub icon SVG path duplicated ~5× — Should be extracted as a shared GithubIcon component or reuse the existing @dailydotdev/shared icon.

Design System Violations

Hardcoded hex colors in inline styles (onboarding-v2.tsx:2868, 2985) — Values like bg-[#0e1217] and rgba(168,85,247,...) bypass the design system. The purple value rgba(168,85,247,...) maps to accent-onion-default.

// ❌ Hardcoded
bg-[#0e1217]
background: 'rgba(168,85,247,0.06)'

// ✅ Use design tokens
bg-background-default
bg-accent-onion-default/6

Fix this →

Logic

panelBackdropOpacity = 1 is a misleading constant — Declared as a computed-looking value but is always 1. The expression panelVisible ? panelBackdropOpacity : 0 simplifies to panelVisible ? 1 : 0. Remove the variable.

app.daily.dev URL hardcoded (onboarding-v2.tsx:1487) — Should use a constant from @dailydotdev/shared/src/lib/constants.

openSignup('topics') flow is dead — The signup prompt modal for context 'topics' shows a generic "Create free account" button that just closes the prompt. If this is intentional, it should be documented; otherwise it may be a leftover.

Shared Changes

The hideSearchField prop addition in MainLayout and MainLayoutHeader is clean and well-scoped. No issues there.

Summary

The build fix is pushed. The two ESLint errors were the root cause of Vercel's failure. The review findings above are improvements worth tracking — the DOM mutation ticker is the most important to address before this goes to high traffic.
| Branch

@claude dix all issues and make sure all are green.

Claude finished @tsahimatsliah's task in 12m 20s —— View job

All Issues Fixed

• Gather context and check CI status
• Read onboarding-v2.tsx to understand issues
• Fix DOM mutation anti-patterns in live engagement ticker
  • Refactor floaters to React state + fixed overlay (liveFloaters state, rendered via position: fixed overlay)
  • Scope document.body MutationObserver to .onb-feed-stage container
• Fix hardcoded hex colors (bg-[#0e1217] → bg-raw-pepper-90, rgba(168,85,247,...) → color-mix())
• Fix misleading panelBackdropOpacity constant (removed, replaced with literal 1)
• Fix hardcoded https://app.daily.dev URL (added mobileAppUrl constant to shared/lib/constants.ts)
• Push fixes ✓

Changes (commit a9488ca)

DOM mutation ticker refactor — The floaters (+1, +2 counters that float up) were created via document.createElement and appended/removed directly outside React. Replaced with:

• LiveFloater type + liveFloaters React state
• bumpOne now calls setLiveFloaters (push on create, filter on cleanup)
• Fixed-position overlay div renders floaters via React, positioned using getBoundingClientRect()
• Removed wrapperEl.style.position = 'relative' / overflow = 'visible' side effects

MutationObserver scoping — The scroll-reveal observer was watching document.body with subtree: true (fires on every DOM change site-wide). Now scoped to .onb-feed-stage with document.body as fallback.

Design system tokens — bg-[#0e1217] → bg-raw-pepper-90 (exact match: pepper.90 = #0E1217). CSS rgba(168,85,247, N) → color-mix(in srgb, var(--theme-accent-onion-default) N%, transparent).

Constants — Added mobileAppUrl = 'https://app.daily.dev' to packages/shared/src/lib/constants.ts. Used in onboarding instead of the inline string.

Removed misleading constant — panelBackdropOpacity = 1 was always 1; panelVisible ? panelBackdropOpacity : 0 simplified to panelVisible ? 1 : 0.
| Branch

@claude review the PR.
Also fix the build and make sure all Vercel and circleCi are green

Claude finished @tsahimatsliah's task in 10m 33s —— View job

PR Review & Build Fix

• Gather context and check current CI status
• Read changed files and assess current state
• Fix build failures:
  • Fix 151 Prettier formatting errors (npx prettier --write)
  • Remove unused TAG_TREND_LABELS constant (line 55)
  • Fix TypeScript error: window narrowed to never in requestIdleCallback else-branch — use ReturnType<typeof setTimeout> + plain setTimeout
  • Fix TypeScript error: impossible signupContext !== 'github' comparison inside isAiSetupContext block
  • Fix 2 Tailwind classnames-order warnings (--max-warnings 0 treats them as errors)
• Push fixes → commit 6d3ccc4
• Review PR code

Build Fix Summary

Five categories of errors were breaking the Vercel build:

Code Review

High — Fragile event delegation hijacking (onboarding-v2.tsx:431–468)

The page intercepts header button clicks by listening on document (capture phase) and string-matching textContent for 'sign up', 'signup', or 'create account':

// onboarding-v2.tsx ~L448
const text = (trigger.textContent || '').trim().toLowerCase();
if (text.includes('sign up') || text.includes('signup') || text.includes('create account')) {

This is brittle — a copy change in MainLayoutHeader silently breaks signup from the header on the onboarding page. Consider passing a hideAuthButtons / onSignup prop down through MainLayoutHeader (the hideSearchField prop added in this same PR shows the pattern already works).

Fix this →

Medium — DOM mutation engagement animation (onboarding-v2.tsx:708–919)

The engagement ticker still creates and destroys real DOM nodes outside React (despite the previous fix that converted floaters to React state). The counter badges on feed articles are still manipulated imperatively:

// ~L764
const label = document.createElement('label');
label.htmlFor = btnId;
wrapper.appendChild(label);
// ...
wrapperEl.classList.add('onb-counter-active');

getComputedStyle(wrapperEl).position at ~L822 and btn.offsetWidth at ~L863 both trigger synchronous layout recalculations (reflow). This is inside a setInterval callback that runs every few seconds, so it will recalculate layout on every tick.

Fix this →

Medium — MutationObserver on entire subtree (onboarding-v2.tsx:~520)

The scroll-reveal observer watches the entire .onb-feed-stage subtree:

feedObserver.observe(feedEl, { childList: true, subtree: true });

This fires on every DOM change inside the feed container, including the very DOM mutations the engagement animation makes (label/span creation). The observer callback and the animation are in a feedback loop — the observer fires because the animation mutated the DOM, the animation mutates the DOM again, etc. Scoping to childList: true, subtree: false (direct children only, to detect article additions) would be safer.

Medium — body.overflow manipulation conflicts with app-level scroll locking

The page sets document.body.style.overflow = 'hidden' when any modal opens. If the app's existing scroll-lock utilities (used by useLazyModal) also touch document.body, they can race. Prefer a data-scroll-locked attribute + CSS class toggle, or use the existing app lock primitive if one exists.

Low — Hardcoded colors remain

A handful of values bypass the design system despite the previous fix pass:

• bg-white/[0.04], bg-white/[0.10], border-white/[0.12] in TOPIC_SELECTED_STYLES and inline classes — these are arbitrary opacity values with no semantic token
• text-black on CTA buttons (onboarding-v2.tsx:~1231) — should be text-raw-pepper-90 or another token
• Inline rgba(255,255,255,0.06) CSS in the <style jsx global> block

Low — FooterWrapper pathname check is fragile

// FooterWrapper.tsx:45
const isOnboardingV2 = router?.pathname === '/onboarding-v2';

If the route is ever renamed, ScrollToTopButton silently reappears. Consider a page-level prop or a route constant shared from lib/constants.

Positive notes

• hideSearchField prop plumbing through MainLayout → MainLayoutHeader → Sidebar is clean and well-scoped
• The confetti, tag-cloud, and panel lift animations are implemented without external animation libraries
• signupContext union type ('topics' | 'github' | 'ai' | 'manual' | null) cleanly models the multi-path flow

| Branch

@claude review the pr again

Claude finished @tsahimatsliah's task in 3m 5s —— View job

PR Review

• Gather context
• Read changed files
• Review shared component changes
• Review onboarding-v2.tsx
• Post review findings

Summary

The build is currently green. The shared component changes (hideSearchField prop) are clean and well-scoped. The main concerns below are in onboarding-v2.tsx — several issues from earlier reviews are still present or partially addressed.

packages/shared Changes — ✅ Clean

The hideSearchField prop plumbing through MainLayout → MainLayoutHeader → Sidebar / SidebarTablet → SidebarDesktop is minimal and correct. No issues.

mobileAppUrl constant in constants.ts is correctly added and used.

FooterWrapper.tsx — the isOnboardingV2 check works but is fragile (see Low section below).

onboarding-v2.tsx — Issues Remaining

High — Engagement animation still mutates the DOM directly

Despite the previous fix pass, the engagement ticker at lines 761–893 still creates real DOM nodes outside React:

// L764 — still creating elements outside React
const label = document.createElement('label');
counter = document.createElement('span');
label.appendChild(counter);
wrapper.appendChild(label);  // L772

// L869 — floater still created via imperative DOM
const floater = document.createElement('span');
wrapperEl.appendChild(floater);   // L880

Additionally, line 863 forces a synchronous layout reflow inside a scheduled timeout (runs every ~350ms–1s per stream, with 4 concurrent streams):

(btn as HTMLElement).offsetWidth; // forced reflow to restart CSS animation

And line 822–823 mutates computed style:

if (getComputedStyle(wrapperEl).position === 'static') {
  wrapperEl.style.position = 'relative'; // direct style mutation
}

Fix this →

High — MutationObserver ↔ animation feedback loop

The MutationObserver at lines 515–523 observes the .onb-feed-stage container with subtree: true:

mutationObserver.observe(feedContainer, {
  childList: true,
  subtree: true,  // ← fires on any descendant DOM change
});

The engagement animation (described above) appends <label>, <span>, and floater <span> elements directly into article buttons inside .onb-feed-stage. Every one of those DOM mutations fires the MutationObserver callback, which calls observeFeedArticles() again. This is a feedback loop running every ~350ms. Change to subtree: false to only watch for article additions at the direct child level.

Fix this →

High — document.querySelectorAll('article') is unscoped (line 494)

// L494 — queries ALL articles on the page, not just feed ones
document.querySelectorAll('article').forEach((el, i) => {

If any other component on the page renders an <article> element (e.g. a modal, a card in the signup panel), it will get reveal-delay CSS props and be observed. Should be scoped to .onb-feed-stage article.

Fix this →

Medium — Fragile header signup interception (lines 431–468)

The document-level capture listener intercepts signup by string-matching textContent:

const label = (trigger.textContent || '').trim().toLowerCase();
const isSignupTrigger =
  label === 'sign up' ||
  label === 'signup' ||
  label.includes('sign up') ||
  label.includes('create account');

A copy change in MainLayoutHeader (e.g. renaming "Sign up" to "Get started") silently breaks this. The hideSearchField prop in this same PR shows the right pattern — add an onSignupClick callback prop to MainLayoutHeader that onboarding-v2 can pass in.

Fix this →

Medium — Animation restarts completely on any modal open/close

The engagement animation's useEffect (lines 911–919) depends on all 7 modal/flow state variables:

}, [
  feedVisible, feedReadyState, showExtensionPromo,
  showGithubImportFlow, showSignupChooser, showSignupPrompt, githubImportExiting,
]);

Each time a user opens and closes the signup chooser, the effect tears down (clears all 4 concurrent stream timeouts) and immediately reinitializes with addTimeout(runStream, 200). The feed animation restarts from scratch on every modal dismiss, which creates a jarring visual reset. Consider pausing (suspending scheduling of new streams) rather than fully stopping when a modal is open.

Medium — document.body.style.overflow doesn't preserve prior state

// L416-421
if (anyModalOpen) {
  document.body.style.overflow = 'hidden';
} else {
  document.body.style.overflow = '';  // ← clobbers any prior overflow set by other code
}

If the app's scroll-lock utilities (used by useLazyModal) also set overflow, this will clobber their cleanup or leave the body with no overflow when it shouldn't. Store the previous value before overriding and restore it on cleanup.

Low — Hardcoded rgba values

A few values still bypass the design system:

• Line 1120 — rgba(255,255,255,0.035) in inline backgroundImage for the dot grid. Can't use a Tailwind class here, but could be a CSS custom property like var(--onb-dot-color) defined in the global style block.
• Lines 1102, 1110 — Mobile header buttons use border-white/[0.14], bg-white/[0.02], bg-white/[0.08], and text-black. These arbitrary opacity values have no semantic meaning; text-black specifically should be text-raw-pepper-90 per the design system.
• Line 1234 — Primary CTA uses text-black — same issue.

Low — FooterWrapper pathname check is fragile (line 45)

// FooterWrapper.tsx:45
const isOnboardingV2 = router?.pathname === '/onboarding-v2';

If the route is renamed, ScrollToTopButton silently reappears. A route constant from @dailydotdev/shared/src/lib/constants (like onboardingUrl) used here would make refactors safe. (Or hideScrollToTop as a layout prop, mirroring hideSearchField.)

Low — Inline GitHub SVG duplicated

The GitHub <svg> path appears inline at least 3 times in the file (hero CTA button ~L1236, import flow panel, orb center). This should be extracted to a local GithubIcon component or reuse the existing icon from @dailydotdev/shared.

Positive Notes

• prefers-reduced-motion checks before running animations — good accessibility practice
• requestIdleCallback with fallback is correctly implemented
• All IntersectionObserver, MutationObserver, ResizeObserver, and timer references are cleaned up in effect return functions
• signupContext union type cleanly models the multi-path flow
• hideSearchField prop plumbing is minimal and correct
  | Branch

@claude fix all

Claude finished @tsahimatsliah's task in 9m 26s —— View job

All Issues Fixed

• Gather context and read current file state
• Fix H1: DOM mutation anti-patterns in engagement animation
• Fix H2: MutationObserver subtree: true → subtree: false
• Fix H3: Unscoped document.querySelectorAll('article') → .onb-feed-stage article
• Fix M1: Fragile header signup interception — add data-header-signup to LoginButton, replace textContent matching
• Fix M2: document.body.style.overflow preserve/restore prior state
• Fix L2: FooterWrapper pathname — add onboardingV2Path constant
• Commit and push → 5318a1c

Changes Summary

H1 — Engagement animation DOM mutations refactored

• document.createElement('span') floaters → React state (liveFloaters) rendered in a position: fixed overlay using viewport coordinates from getBoundingClientRect()
• wrapperEl.style.position = 'relative' direct style mutation → CSS class .onb-eng-pos-relative
• (btn as HTMLElement).offsetWidth forced synchronous reflow → style.animationName = 'none' (write-only, no reflow) + requestAnimationFrame to restore the class
• Effect cleanup now calls setLiveFloaters([]) so floaters don't persist when modals open/close and cancel pending cleanup timeouts

H2 — MutationObserver feedback loop broken

• subtree: true → subtree: false — now only fires when new articles are added directly to .onb-feed-stage, not for every <span>/<label> the animation appends inside article buttons

H3 — querySelectorAll scoped to feed

• document.querySelectorAll('article') → document.querySelectorAll('.onb-feed-stage article') — prevents reveal animations from targeting articles in modals or other components

M1 — Signup interception no longer relies on textContent

• Added data-header-signup attribute to LoginButton's sign-up <Button>
• onboarding-v2.tsx now checks 'headerSignup' in trigger.dataset — immune to button copy changes

M2 — Body overflow preserved

• Stores previous document.body.style.overflow in a ref before setting 'hidden', restores it on close/cleanup — avoids clobbering scroll locks set by other utilities

L2 — FooterWrapper uses constant

• Added export const onboardingV2Path = '/onboarding-v2' to packages/shared/src/lib/constants.ts
• FooterWrapper.tsx imports and uses it instead of a hardcoded string literal
  | Branch

@claude make sure the build is working and all vercel and circleci are green

Claude finished @tsahimatsliah's task in 5m 7s —— View job

Build Fixed ✓

• Gather context
• Check CI status — found 3 ESLint errors in onboarding-v2.tsx
• Fix errors:
  • no-param-reassign at line 513 — added // eslint-disable-next-line comment (direct dataset assignment on a forEach callback parameter)
  • no-multi-assign at line 892 — split const newFloaterId = (floaterIdRef.current += 1) into two separate statements
  • prettier/prettier at line 904 — reformatted .filter() callback to multi-line to satisfy Prettier's line-length rules
• Verified pnpm --filter webapp lint and pnpm --filter @dailydotdev/shared lint both pass clean
• Pushed fix → commit 00a0d70

Vercel should now build successfully. CircleCI only lints packages/shared (which was already clean).
| Branch